<template>
  <div class="moving-path">
    <a-button @click="handleClick">Fill in the infomation</a-button>
    <div class="scroll-move"></div>
    <div class="top-block"></div>
    路径动画和滚动
    <svgCol />
    <svgCol />
    <svgCol />
    <svgCol />
    <svgCol />
  </div>
</template>

<script setup lang="ts">
  import { inject } from 'vue'
  import svgCol from './components/svgCol.vue'

  const getInfoByModal = inject('getInfoByModal')

  const handleClick = async () => {
    getInfoByModal()
      .then((res) => {
        console.log('%c [  ]-24', 'font-size:13px; background:#0d5179; color:#5195bd;', res)
      })
      .catch((err) => {
        console.log('%c [  ]-27', 'font-size:13px; background:#0ecc1c; color:#52ff60;', err)
      })
  }
</script>

<style lang="less" scoped>
  .moving-path {
    // overflow-y: scroll;
    overflow: auto;
    height: 100vh;
    position: relative;
    scroll-timeline-name: --movingPath;
  }
  .scroll-move {
    content: '';
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 6px;
    background-color: #ef3ecd;
    animation: scale 3s linear;
    animation-timeline: --movingPath;

    transform-origin: 0 50%;
  }
  @keyframes scale {
    from {
      opacity: 0;
      transform: scaleX(0.5);
    }
    to {
      opacity: 1;
      transform: scaleX(1);
    }
  }
  .svg-col {
    background-color: aquamarine;
    margin-bottom: 4px;
    animation: scale 3s linear;
    animation-timeline: view(100% 0);
  }

  .top-block {
    position: fixed;
    bottom: 50px;
    right: 170px;
    width: 50px;
    height: 50px;
    border-radius: 6px;
    background-color: rgb(35, 67, 56);
    box-shadow: 2px 2px 2px rgb(35, 67, 56, 0.8);
    z-index: 2;
  }
</style>
